import React, { Component } from 'react'
import axios from 'axios'
export default class Cinema extends Component {
    constructor() {
        super()
        this.state = {
            cinemaList: [],
            backcinemaList:[]
        }
        axios({
            url: 'https://m.maizuo.com/gateway?cityId=310100&ticketFlag=1&k=6761103',
            method: 'GET',
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"16481229525129758614487041","bc":"310100"}',
                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then(response => {
            this.setState({ cinemaList: response.data.data.cinemas,backcinemaList: response.data.data.cinemas })
        })
    }
    render() {
        return (
            <div>
                <input onInput={this.handleInput}/>
                {
                    this.state.cinemaList.map(item => <dl key={item.cinemaId}>
                        <dt>{item.name}</dt>
                        <dd>{item.address}</dd>
                    </dl>)
                }
            </div>
        )
    }

    handleInput=(event)=>{
        const newlist=this.state.backcinemaList.filter(item=>item.name.includes(event.target.value)||item.address.toUpperCase().includes(event.target.value.toUpperCase()))
        this.setState({ cinemaList:newlist})
    }
}
